<template>
  <div class="carousel" :class="{ mobile: isMobile, dark: isDarkTheme }">
    <div class="swiper" v-if="articles.length && !fetching">
      <swiper
        :pagination="{ clickable: true }"
        :autoplay="swiperOptions.autoplay"
        class="swiper-wrapper"
      >
        <swiper-slide v-for="(articleItem, index) in articles.slice(0, 5)" :key="index">
          <div class="content">
            <router-link :to="`/article/${articleItem.id}`" class="link">
              <img :src="articleItem.thumb" :alt="articleItem.title" />
              <div class="title">
                <div class="background"></div>
                <div class="prospect">
                  <span class="text">{{ articleItem.title }}</span>
                </div>
              </div>
            </router-link>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="article-skeleton" key="skeleton" v-else>
      <div class="title">
        <skeleton-line />
      </div>
      <div class="content">
        <div class="first">
          <skeleton-line />
        </div>
        <skeleton-paragraph :lines="10" />
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import SkeletonLine from "@/components/skeleton/line.vue";
import SkeletonParagraph from "@/components/skeleton/paragraph.vue";
import { useEnhandle } from "@/enhandle";

export default defineComponent({
  name: "Carousel",
  components: {
    SkeletonLine,
    SkeletonParagraph,
    Swiper,
    SwiperSlide,
  },
  props: {
    articles: {
      type: Array,
      default: () => [],
    },
    fetching: {
      type: Boolean,
      required: true,
    },
  },
  setup() {
    const swiperOptions = {
      height: 34,
      autoplay: {
        delay: 3500,
        disableOnInteraction: false,
      },
      allowTouchMove: false,
      slidesPerView: 1,
      setWrapperSize: true,
      direction: "vertical",
    };
    const { isMobile, isDarkTheme } = useEnhandle();

    return {
      isMobile,
      isDarkTheme,
      swiperOptions,
    };
  },
});
</script>

<style lang="scss">
$pc-carrousel-height: 310px;
$mobile-carrousel-height: calc((100vw - 2rem) * 0.35);

.carousel {
  height: $pc-carrousel-height;
  margin-bottom: $lg-gap;
  position: relative;
  @include common-bg-module();
  @include radius-box($lg-radius);

  &.dark {
    .swiper-slide {
      .title {
        .prospect {
          .text {
            -webkit-text-fill-color: $text !important;
          }
        }
      }
    }
  }

  .swiper {
    position: relative;
    height: $pc-carrousel-height;

    .swiper-wrapper {
      display: flex;
      transition-property: transform;
      box-sizing: content-box;
      height: $pc-carrousel-height;

      &[style*="300ms"] {
        .swiper-slide-active {
          .content {
            @include blur-filter("horizontal");
          }
        }
      }
      .swiper-slide {
        // margin-right: 0;
        > .content {
          width: 100%;
          height: $pc-carrousel-height;
          position: relative;
          overflow: hidden;

          > .link {
            display: block;
            width: 100%;
            height: 100%;
          }

          img {
            width: 100%;
            // height: inherit;
            transform: scale(1);
            transition: transform $transition-time-normal;

            &:hover {
              transform: scale(1.06);
            }
          }

          .title {
            $offset: 3px;
            position: absolute;
            display: block;
            top: 2rem;
            right: 2.6rem;
            opacity: 0.8;
            transition: opacity $transition-time-normal;

            .background {
              content: "";
              position: absolute;
              width: 100%;
              height: 100%;
              z-index: -1;
              top: 0;
              left: 0;
              background-color: $module-bg;
              transform: translate3d($offset, -$offset, 0);
              transition: transform $transition-time-fast;
            }

            .prospect {
              padding: 0 1em;
              height: 2em;
              line-height: 2em;
              @include text-overflow;
              background-color: $module-bg-opaque;
              background-position: top right;
              transform: translate3d(-$offset, $offset, 0);
              transition: transform $transition-time-fast;

              .text {
                letter-spacing: 0.3px;
                font-weight: bold;
                color: $text;
                background-clip: text;
                -webkit-background-clip: text;
                // -webkit-text-fill-color: transparent;
              }
            }

            &:hover {
              opacity: 1;
              .background {
                transform: translate3d(0, 0, 0);
              }
              .prospect {
                transform: translate3d(0, 0, 0);
              }
            }
          }
        }
      }
    }

    .swiper-pagination {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 20px;
      line-height: 20px;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.2);
      .swiper-pagination-bullet {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #000;
        // opacity: 0.2;
        margin: 0 4px;
        border-radius: 50%;
        cursor: pointer;
        &.swiper-pagination-bullet-active {
          width: 2rem;
          background-color: #0088f5;
          border-radius: 10px;
        }
      }
    }
  }

  &.mobile {
    margin-bottom: $gap;
    height: $mobile-carrousel-height;
    .swiper {
      width: 100%;
      height: $mobile-carrousel-height;
      .swiper-wrapper {
        display: flex;
        transition-property: transform;
        box-sizing: content-box;
        height: $mobile-carrousel-height;
        .swiper-slide {
          > .content {
            height: $mobile-carrousel-height;

            > .title {
              right: 1.7rem;
              max-width: 70%;
            }
          }
        }
      }
    }
  }

  .article-skeleton {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 2rem;

    .content {
      width: 50%;
      margin-top: 2.6rem;
      margin-left: 1rem;

      .first {
        width: 8rem;
        height: $gap * 2;
        margin-bottom: $gap;
      }
    }
    .title {
      position: absolute;
      top: 2rem;
      right: 2rem;
      height: 2.6rem;
      width: 18rem;
    }
  }
}
</style>
